<template>
  <el-skeleton style="hight: 250px,wight:180px" :loading="true" animated>
    <template slot="template">
      <div class="playlist-item">
        <div class="music-pic">
          <div class="shadow">
            <div class="playcount">
            </div>
          </div>
          <el-skeleton-item variant="image" style="width: 180px; height: 180px;" />
        </div>
        <div class="dec">
          <el-skeleton-item variant="text" style="width: 80%;" />
        </div>
      </div>
    </template>
    <template>
      <div class="playlist-item">
        1
      </div>
    </template>
  </el-skeleton>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  name: "playlist-skeleton",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {};
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang='less'>
.playlist-item {
  position: relative;
  width: 180px;
  height: 250px;

  .play-btn {
    position: absolute;
    bottom: 80px;
    right: 10px;
    height: 40px;
    width: 40px;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    opacity: 0%;
    background-color: rgb(255, 255, 255);
    .icon-palyer-start-01 {
      font-size: 25px;
      padding-left: 5px;
      color: rgb(113, 198, 255);
    }
  }
  .music-pic:hover .play-btn {
    opacity: 100%;
  }

  .shadow {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 20px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    background: linear-gradient(to bottom, #ceced1, transparent);
  }
  .playcount {
    position: absolute;
    top: 5px;
    right: 8px;
    color: white;
    font-size: 13px;
  }
  .el-icon-caret-right {
    color: white;
    font-size: 18px;
  }
  .music-pic img {
    width: 180px;
    height: 180px;
    border-radius: 10px;
    cursor: pointer;
  }
  .dec {
    margin-top: 5px;

    .name {
      margin-top: 13px;
      font-size: 15px;
      color: rgb(68, 68, 68);
      text-decoration: none;
    }
    .name:hover {
      color: black;
    }
    .name:active {
      color: rgb(68, 68, 68);
      text-decoration: none;
    }
  }
}
</style>